<template>
  <div>
    <div>
      <a-button type="primary" @click="visible = true">导入</a-button>
    </div>
    <a-form :form="form">
    <a-form-item label="bookSourceName">
      <a-input v-decorator="['bookSourceName', { rules: [{ required: true }] }]"></a-input>
    </a-form-item>
    <a-form-item label="bookSourceUrl">
      <a-input v-decorator="['bookSourceUrl', { rules: [{ required: true }] }]"></a-input>
    </a-form-item>
    <a-form-item label="ruleBookName">
      <a-input v-decorator="['ruleBookName', { rules: [{ required: true }] }]"></a-input>
    </a-form-item>
    <a-form-item label="ruleBookAuthor">
      <a-input v-decorator="['ruleBookAuthor']"></a-input>
    </a-form-item>
    <a-form-item label="ruleIntroduce">
      <a-input v-decorator="['ruleIntroduce']"></a-input>
    </a-form-item>
    <a-form-item label="ruleCoverUrl">
      <a-input v-decorator="['ruleCoverUrl']"></a-input>
    </a-form-item>
    <a-form-item label="ruleChapterUrlNext">
      <a-input v-decorator="['ruleChapterUrlNext']"></a-input>
    </a-form-item>
    <a-form-item label="ruleChapterList">
      <a-input v-decorator="['ruleChapterList', { rules: [{ required: true }] }]"></a-input>
    </a-form-item>
    <a-form-item label="ruleBookContent">
      <a-input v-decorator="['ruleBookContent', { rules: [{ required: true }] }]"></a-input>
    </a-form-item>
    <a-form-item label="ruleChapterName">
      <a-input v-decorator="['ruleChapterName', { rules: [{ required: true }] }]"></a-input>
    </a-form-item>
    <a-form-item label="rulechapterUrl">
      <a-input v-decorator="['rulechapterUrl', { rules: [{ required: true }] }]"></a-input>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="submit">添加</a-button>
    </a-form-item>
  </a-form>
    <a-modal :visible="visible" title="导入" @ok="handleImport" @cancel="visible = false">
      <a-form>
        <a-form-item label="书源代码">
          <a-textarea v-model="code" :row="10"></a-textarea>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { getSource, updateSource } from '@/api'
export default {
  props: {
    id: {
      type: String
    }
  },
  data () {
    return {
      detail: {},
      visible: false,
      code: '',
      form: this.$form.createForm(this)
    }
  },
  created () {
    this.getDetail()
  },
  methods: {
    getDetail () {
      getSource({ _id: this.id }).then(res => {
        if (res.code === 200) {
          this.detail = res.data
          this.form.setFieldsValue(res.data)
        }
      })
    },
    handleImport () {
      if (!this.code) {
        this.$message.error('请输入代码')
        return
      }
      let code
      try {
        code = JSON.parse(this.code)
      } catch (e) {
        this.$message.error('请输入正确的JSON')
      }
      if (code) {
        this.form.setFieldsValue(code)
        this.visible = false
      }
    },
    submit () {
      this.form.validateFields(async (err, values) => {
        if (err) return
        await updateSource({ id: this.id, update: values })
        this.$router.push('/source/list')
      })
    }
  }
}
</script>

<style>

</style>